<!--时钟图标的弹窗组件-->
<template>
  <!--弹窗最外层的容器-->
  <div v-show="isShowEnterGroup" id="enterGroup">
    <!--弹窗的窗口，遮罩层-->
    <div class="enterGroup_content">
      <!--弹窗头部-->
      <div class="enterGroup_content_border">
        <div v-transfer-dom>
          <alert v-model="isShowAlert"> {{alertText}}</alert>
        </div>
        <!--搜索div-->
        <div class="enterGroup_search_input">
          <input v-model="queryConditions" placeholder="例：2019级" 
          class="search_input" @input="searchGroup">
          <span @click="searchGroup" class="search_btn">
            <img src="~static/img/search.png" height="27" width="27"  alt="搜索" />
          </span>
        </div>

        <!--展示搜索结果的div-->
        <div class="userList">
          <div v-for="(item,index) in allGroupList" :key="index">
            <!--循环显示查询到的分组结果  -->
            <div class="list" :for="item.groupId">
              <!--被选中的选项，图标变红-->
              <!-- <i class="fa fa-users list_icon" :style="{color:(picked === item.groupId?'#A80000':'#1abc9c')}"></i> -->
              <input type="radio" :id="item.groupId" :value="item.groupId" v-model="picked" style="display: none">
              <label class="list_name" :for="item.groupId" :style="{color:(picked === item.groupId?'#1ABC9C':'black')}">{{item.detail.groupName}}</label>
            </div>
            <hr class="list_divider">
          </div>
        </div>
        <!--操作按钮-->
        <!-- <hr style="border: 0;background-color: #2a6496;height: 1.5px;width: 100%;margin-top: 20px;margin-bottom: 10px"> -->
        <div class="click_btn">
          <button class="my_button" @click="cancel">返回
          </button>
          <button class="my_button" @click="joinGroup">加入
          </button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import {XHeader, Group, Calendar, Search} from 'vux'
  import {mapState} from 'Vuex'
  import group from 'api/group'
  import {compareByProp} from 'utilMethods/sort.js'

  export default {
    props: {
      isShowEnterGroup: {type: Boolean}
    },
    data () {
      return {
        userID: '',
        alertText: '',
        isShowAlert: false,
        picked: '',
        isActive: false,
        // Rock Wang: 这个数据是少了还是本不需要？
        queryConditions: '',
        allGroupList: [],
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['groupListDimlook']),
      groupId () {
        const {item} = this
        return item.groupId
      },
      groupName () {
        const {item} = this
        return item.groupName
      },
    },
    watch: {
      isShowEnterGroup (val) {
        this.searchGroup()
      },
    },
    methods: {
      getId (index) {
        return index
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      async searchGroup () {
        if (this.queryConditions === null || this.queryConditions === '' || this.queryConditions === undefined) {
          this.queryConditions = ''
        } else {
          const result = await group.getSearchByGroupName(this.queryConditions)
          this.allGroupList = result.data
          this.allGroupList.sort(compareByProp('detail groupName'))
          if (this.allGroupList.length === 0) {
            this.showAlert('无搜索结果')
            setTimeout(this.closeTip, 1000)
          }
          console.log(result)
        }
      },
      changeValue (index) {
        this.isActive = index
      },
      cancel () {
        // Rock Wang: 点击取消从此页面退出后，需要将存放在state中的分组数据更新为
        // 此实验室的所有分组要不然，退出后又点进此页面，依然会显示刚刚通过查询显示的页面
        // 清空搜索栏与选中项
        this.queryConditions = ''
        this.picked = ''
        this.allGroupList.length = 0
        this.closeTip()
        this.$emit('update:isShowEnterGroup', false)
      },
      async joinGroup () {
        console.log(this.picked)
        if(this.picked===null||this.picked===''){
          this.showAlert('请先选中要加入的群')
        }else {
          const result = await group.postEnterGroup({
            groupId: this.picked
          })
          if (result.code === 0) {
            //如果失败了显示提示
            this.showAlert(result.message)
          } else {
            //成功了显示成功，并关闭弹窗
            this.showAlert(result.data)
            setTimeout(this.cancle, 1000)
          }
        }
      },
    },
    components: {
      Search
    },
  }
</script>
<style scoped>
  #enterGroup {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    display: flex;
  }

  .enterGroup_content {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
  }

  .enterGroup_content_border {
    width: 80%;
    margin: 10px auto;
    border: #35495e solid 1px;
    padding: 20px 10px 20px 10px;
    border-radius: 10px;
    margin-top: 15%;
  }

  .enterGroup_search_input {
    margin: 5px auto;
    padding: 20px 10px 20px 10px;
    display: flex;
    justify-content:space-evenly;
  }

  .search_input {
    border: 1px #999 solid;
    width: 200px;
    height: 20px;
    border-radius: 20px;
    padding: 5px 10px;
    border: 1px solid green;
  }

  .search_btn{
    display: inline-block;
    margin-left: 10px;
    height: 35px;
    width: 35px;
  }
  .userList {
    border: 1px #35495e solid;
    border-radius: 3px;
    width: 100%;
    /*height: 100%;*/
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 250px;
  }

  .list {
    height: 30px;
    width: 500px;
    box-sizing: content-box;
    text-align: left;

  }

  .list_icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    font-size: 30px;
    margin-left: 3px;
    margin-right: 1px;
    margin-top: 2px;
  }

  .list_name {
    display: inline-block;
    margin-left: 15px;
    height: auto;
    overflow: hidden;
    margin-top: 5px;
  }

  .list_divider{
    margin-left: 5px;
    margin-right: 5px;
    border: 0;
    height: 1px;
    width: 490px;
    background-color: rgba(53,73,94,.2);
  }

  .click_btn {
    height: 40px;
    width: 80%;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    /*position: fixed;*/
    /*top:90%*/
  }

  .my_button {
    width: 120px;
    height: 40px;
    border: none;
    color: white;
    background: #35495e;
    text-align: center;
    outline: none;
    border-radius: 5px;
    margin-left: 15px;
  }
</style>
